<template>
  <div class="f" style="width: 100%">
    <div class="flexcom">
      <span>{{ mr.label }}</span>
      <el-input
        size="medium"
        :placeholder="`请输入${mr.label}`"
        v-model="from[mr.value]"
        clearable
      >
      </el-input>
    </div>
    <slot></slot>
    <div class="f">
      <el-button size="mini" type="primary" @click="Search">搜索</el-button>
      <el-button size="mini" @click="cz">重置</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: { 
    from: {
      type: Object,
      default: () => {},
    },
    mr: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
    };
  },
  methods:{
    cz(){
      this.$emit('update:from', {});
      this.$emit('search');
    },
    Search(){
      this.$emit('search');
    }
  }
};
</script>

<style>
.f {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>
